<template>
  <div>
    <el-row ref="search_form">
          <el-col :span="24">
            <div class="search-box">
              <el-form :inline="true" size="medium" :model="searchForm">



                <el-form-item label="">
                  <el-select v-model="searchForm.month" size="mini" placeholder="请选择月份" clearable>
                    <el-option v-for="item in monthList" :key="item.id" :label="item.month" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>





                <el-form-item>
                  <el-button  size="mini" type="primary" @click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button  size="mini" type="primary" @click="clear">清空</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button  size="mini" type="primary" @click="search">刷新</el-button>
                </el-form-item>



              </el-form>
            </div>
          </el-col>
        </el-row>

    <el-table
      :data="tableData"
      :header-cell-style="{backgroundColor:'#f4f4f5',textAlign:'center'}"
      :cell-style="{textAlign:'center'}"
      :height="tableHeight"
      border
      style="width: 100%">
      <!-- <el-table-column
        prop="serialNumber"
        label="编号"
        min-width="180">
      </el-table-column> -->
      <el-table-column
        prop="name"
        label="姓名"
        min-width="180">
      </el-table-column>
      <!-- <el-table-column
        prop="gender"
        label="性别"
        min-width="180">
        <template scope="scope">
          <span v-if="scope.row.gender==1">男</span>
          <span v-else-if="scope.row.gender==2">女</span>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="workName"
        label="考勤组"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="department"
        label="部门"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="position"
        label="职位"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop=""
        label="一"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'01')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="二"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'02')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="三"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'03')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="四"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'04')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="五"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'05')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="六"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'06')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="七"
        align="left"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'07')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="八"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'08')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="九"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'09')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="十"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'10')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="十一"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'11')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="十二"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'12')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="十三"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'13')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="十四"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'14')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="十五"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'15')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="十六"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'16')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="十七"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'17')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="十八"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'18')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="十九"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'19')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="二十"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'20')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="二十一"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'21')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="二十二"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'22')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="二十三"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'23')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="二十四"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'24')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="二十五"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'25')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="二十六"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'26')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="二十七"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'27')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="二十八"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'28')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="二十九"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'29')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="三十"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'30')"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="三十一"
        min-width="180">
        <template scope="scope">
          <div v-html="fmtTime(scope.row.time,'31')"></div>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="costCenter"
        label="成本中心"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="card"
        label="是否发卡"
        min-width="180">
        <template scope="scope">
          <span v-if="scope.row.gender==1">是</span>
          <span v-else-if="scope.row.gender==2">否</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="cardId"
        label="卡号"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="cardDate"
        label="发卡日期"
        min-width="180">
        <template scope="scope">
          {{fmtDate(scope.row.cardDate)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="账号"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="entryDate"
        label="入职时间"
        min-width="180">
        <template scope="scope">
          {{fmtDate(scope.row.entryDate)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="contractStart"
        label="合同开始日期"
        min-width="180">
        <template scope="scope">
          {{fmtDate(scope.row.contractStart)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="contractEnd"
        label="合同结束日期"
        min-width="180">
        <template scope="scope">
          {{fmtDate(scope.row.contractEnd)}}
        </template>
      </el-table-column>

      <el-table-column
        prop="dimission"
        label="是否离职"
        min-width="180">
        <template scope="scope">
          <span v-if="scope.row.gender==1">是</span>
          <span v-else-if="scope.row.gender==2">否</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="dimissionType"
        label="离职类型"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="dimissionCause"
        label="离职原因"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="dimissionDate"
        label="离职日期"
        min-width="180">
        <template scope="scope">
          {{fmtDate(scope.row.dimissionDate)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="idCard"
        label="身份证号"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系电话"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="nation"
        label="民族"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="nativePlace"
        label="籍贯"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="politicsStatus"
        label="政治面貌"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="fertilityStatus"
        label="生育状况"
        min-width="180">
        <template scope="scope">
          <span v-if="scope.row.gender==1">未育</span>
          <span v-else-if="scope.row.gender==2">已育</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="maritalStatus"
        label="婚姻状况"
        min-width="180">
        <template scope="scope">
          <span v-if="scope.row.gender==1">未婚</span>
          <span v-else-if="scope.row.gender==2">已婚</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="birthDate"
        label="出生日期"
        min-width="180">
        <template scope="scope">
          {{fmtDate(scope.row.birthDate)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="educationBackground"
        label="最高学历"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="height"
        label="身高"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="weight"
        label="体重"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="familyAddress"
        label="家庭住址"
        min-width="180">
      </el-table-column> -->

      <!-- <el-table-column
        prop="address"
        fixed="right"
        label="操作"
        min-width="250">
        <template slot-scope="scope">


          <el-button style="margin-top:8px" size="mini" type="primary" @click="handleOrderTaskNext(scope.$index, scope.row)">人员下发</el-button>


          <el-button style="margin-top:8px" size="mini" type="primary" @click="uploadPhotograph(scope.$index, scope.row)">上传人脸</el-button>

          <el-button style="margin-left:4px" size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>

          <el-button style="margin-top:8px" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>




          <!-- <el-button style="margin-top:8px" size="mini" type="primary" @click="handleEditPrice(scope.$index, scope.row)">对外打包价管理</el-button> -->

    <!--    </template>
      </el-table-column> -->
    </el-table>
    <div class="block">
       <span class="demonstration"></span>
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage"
         :page-sizes="[10, 20, 50, 100,200]"
         :page-size="pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
       </el-pagination>
     </div>

    <el-dialog :title="editForm.id==0?'新增':'修改'" :visible.sync="editFormVisible" width="900px" :close-on-click-modal="false">
      <el-form :model="editForm" ref="editForm" :rules="editRules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="编号" label-width="100px" prop="serialNumber">
              <el-input v-model="editForm.serialNumber" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" label-width="100px" prop="name">
              <el-input v-model="editForm.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- <el-form-item label="部门" label-width="100px" prop="department">
              <el-input v-model="editForm.department" autocomplete="off"></el-input>
            </el-form-item> -->
            <el-form-item label="部门" label-width="100px">
              <el-select v-model="editForm.department" placeholder="请选择" style="width: 90%;" >
                <el-option
                  v-for="item in this.department"
                  :key="item.id"
                  :label="item.title"
                  :value="item.title">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="性别" label-width="100px" prop="gender">
            <el-select v-model="editForm.gender"  placeholder="请选性别" clearable>
              <el-option :key="1" label="男" :value="1"></el-option>
              <el-option :key="2" label="女" :value="2"></el-option>
            </el-select>
          </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <!-- <el-form-item label="职位" label-width="100px" prop="position">
              <el-input v-model="editForm.position" autocomplete="off"></el-input>
            </el-form-item> -->
            <el-form-item label="职位" label-width="100px">
              <el-select v-model="editForm.position" placeholder="请选择" style="width: 90%;" >
                <el-option
                  v-for="item in this.position"
                  :key="item.id"
                  :label="item.position"
                  :value="item.position">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成本中心" label-width="100px" prop="costCenter">
              <el-input v-model="editForm.costCenter" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否发卡" label-width="100px" prop="card">
              <el-select v-model="editForm.card"  placeholder="请选择" clearable>
                <el-option :key="1" label="是" :value="1"></el-option>
                <el-option :key="2" label="否" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卡号" label-width="100px" prop="cardId">
              <el-input v-model="editForm.cardId" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发卡日期" label-width="100px" prop="cardDate">
              <el-date-picker
                v-model="editForm.cardDate"
                type="month"
                value-format="timestamp"
                format="yyyy年MM月"
                placeholder="选择发卡日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账号" label-width="100px" prop="username">
              <el-input v-model="editForm.username" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入职时间" label-width="100px" prop="entryDate">
              <el-date-picker
                v-model="editForm.entryDate"
                type="month"
                value-format="timestamp"
                format="yyyy年MM月"
                placeholder="选择入职日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同开始日期" label-width="100px" prop="contractStart">
              <el-date-picker
                v-model="editForm.contractStart"
                type="month"
                value-format="timestamp"
                format="yyyy年MM月"
                placeholder="选择合同开始日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同结束日期" label-width="100px" prop="contractEnd">
              <el-date-picker
                v-model="editForm.contractEnd"
                type="month"
                value-format="timestamp"
                format="yyyy年MM月"
                placeholder="选择合同结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否离职" label-width="100px" prop="dimission">
              <el-select v-model="editForm.dimission"  placeholder="请选择" clearable>
                <el-option :key="1" label="是" :value="1"></el-option>
                <el-option :key="2" label="否" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="离职原因" label-width="100px" prop="dimissionCause">
              <el-input v-model="editForm.dimissionCause" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="离职日期" label-width="100px" prop="dimissionDate">
              <el-date-picker
                v-model="editForm.dimissionDate"
                type="month"
                value-format="timestamp"
                format="yyyy年MM月"
                placeholder="选择离职日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" label-width="100px" prop="idCard">
              <el-input v-model="editForm.idCard" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" label-width="100px" prop="phone">
              <el-input v-model="editForm.phone" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族" label-width="100px" prop="nation">
              <el-input v-model="editForm.nation" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="籍贯" label-width="100px" prop="nativePlace">
              <el-input v-model="editForm.nativePlace" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="政治面貌" label-width="100px" prop="politicsStatus">
              <el-input v-model="editForm.politicsStatus" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生育状况" label-width="100px" prop="fertilityStatus">
              <el-select v-model="editForm.fertilityStatus"  placeholder="请选择" clearable>
                <el-option :key="1" label="未育" :value="1"></el-option>
                <el-option :key="2" label="已育" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="婚姻状况" label-width="100px" prop="maritalStatus">
              <el-select v-model="editForm.maritalStatus"  placeholder="请选婚姻状况" clearable>
                <el-option :key="1" label="未婚" :value="1"></el-option>
                <el-option :key="2" label="已婚" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期" label-width="100px" prop="birthDate">
              <el-date-picker
                v-model="editForm.birthDate"
                type="month"
                value-format="timestamp"
                format="yyyy年MM月"
                placeholder="选择出生日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最高学历" label-width="100px" prop="educationBackground">
              <el-input v-model="editForm.educationBackground" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身高" label-width="100px" prop="height">
              <el-input v-model="editForm.height" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="体重" label-width="100px" prop="weight">
              <el-input v-model="editForm.weight" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="家庭住址" label-width="100px" prop="familyAddress">
              <el-input v-model="editForm.familyAddress" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native.prevent="submitForm" :loading="loading">{{ editForm.id==0?'添 加':'修 改' }}</el-button>
      </div>
    </el-dialog>

    <el-dialog title='上传照片' :visible.sync="photographVisible" width="700px" :close-on-click-modal="false">
      <el-form :model="editForm" ref="editForm" :rules="editRules">
        <el-form-item label="上传照片" label-width="120px" prop="">
        <el-upload
          class="avatar-uploader"
          :action="uploadActionUrl"
          :on-preview="handlePreview"
          :on-remove="handleRemove"

          multiple
          :on-success="handleAvatarSuccess"
          :file-list="fileList"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
        </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="photographVisible = false">取 消</el-button>
        <el-button type="primary" @click.native.prevent="photograph" :loading="loading">{{ editForm.id==0?'上 传':'修 改' }}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="选择下发机器" :visible.sync="equipmentVisible" width="500px" :close-on-click-modal="false">
      <el-form :model="changeUserForm" ref="changeUserForm" >
        <el-form-item label="人脸机" label-width="100px">
          <el-select v-model="changeUserForm.sn" placeholder="请选择" style="width: 90%;" >
            <el-option
              v-for="item in this.snDataName"
              :key="item.id"
              :label="item.name+'('+item.sn+')'"
              :value="item.sn">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="equipmentVisible = false">取 消</el-button>
        <el-button type="primary" @click.native.prevent="submitChangeUser">下发</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {validPhone} from '@/common/utils/validate.js'
import request from '@/common/utils/request.js'
import util from '@/common/utils/util.js'
import {getGoClassesTimeList, addGoPersonnel, updateGoPersonnel, deleteGoPersonnel} from "../../../api/go_personnel.js"
import axios from 'axios'
import {getToken} from "../../../common/utils/auth";
import {addGoPhotograph} from "../../../api/go_photograph.js"
import {getDepartmentList} from '@/api/go_department'
import {getGoPositionList} from "@/api/go_position.js";
import {getDeviceManageList} from "../../../api/device_manage.js";

export default {
  name: "goClassesTime",
  data() {
    return {
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableData: [],
      tableHeight: 200,
      editFormVisible:false,
      photographVisible:false,
      equipmentVisible:false,
      loading: false,
      fileList:[],
      department:[],
      position:[],
      snName:[],
      snDataName:[],
      snData:'',
      monthList:[],
      url:'',
      searchForm: {
        month:'',
      },
      changeUserForm:{
        sn:'',
        url:'',
        serialNumber:'',
        phone:'',
        id:'',
        name:'',
      },
      editForm: {
        id: 0,
        name: '',
        serialNumber: '',
        department: '',
        gender: '',
        position: '',
        costCenter: '',
        card: '',
        cardId: '',
        cardDate: '',
        username: '',
        entryDate: '',
        contractStart: '',
        contractEnd: '',
        dimission: '',
        dimissionType: '',
        dimissionCause: '',
        dimissionDate: '',
        idCard: '',
        phone: '',
        nation: '',
        nativePlace: '',
        politicsStatus: '',
        fertilityStatus: '',
        maritalStatus: '',
        birthDate: '',
        educationBackground: '',
        height: '',
        weight: '',
        familyAddress: '',


      },
      editRules: {
        name: [{ required: true, message:"请输入姓名", trigger: 'blur'}],
        phone: [
          { validator: validPhone, message:"手机号码格式错误", trigger: 'blur'}
        ],

      },


      baseUrl: 'https://face.gengduoke.com/api',
      uploadActionUrl: '',
      avatarUploadLoadingDiv: '',


      loadingDiv: null,
      searchForm: {

      },
      roleList:[],
    }
  },
  watch:{

  },
  mounted() {
    let t = getToken();
    this.uploadActionUrl = this.$adminApiUrl + "/file/upload?_t="+t;
    this.fileBaseUrl = this.$adminApiUrl+"/file/get?_t="+t+"&f=";


    this.getDataList(this.currentPage);

    this.$nextTick(() => {
        this.tableHeight = document.documentElement.clientHeight - 198;
    })
    window.onresize = () => {
      this.$nextTick(() => {
          this.tableHeight = document.documentElement.clientHeight - 198;
      })
    }
  },
  methods: {

    uploadPhotograph(index, row) {
      this.editForm.fileVideoList = [];
      this.editForm.fileList = [];
      this.fileList = [];
      this.fileVideoList = [];
      this.editForm.serialNumber = row.serialNumber;
      this.photographVisible = true;
    },



    handleOrderTaskNext(index, row){
      // console.log(row)
      // console.log(row.url)
    if(util.isEmpty(row.url)){
      this.$message.error("未发现照片。请上传人脸");
      return;
    }
    this.changeUserForm.sn = '';
    this.snDataName = [];
    this.changeUserForm.serialNumber = row.serialNumber;
    this.changeUserForm.phone = row.phone;
    this.changeUserForm.id = row.id;
    this.changeUserForm.name = row.name;
    this.changeUserForm.url = row.url;
    for(var i=0;i<this.snData.length;i++){
      for(var k=0;k<this.snName.length;k++){
        if(this.snData[i].sn==this.snName[k].sn){
          this.snDataName.push(this.snName[k]);
        }
      }
    }

    this.equipmentVisible = true;
    // console.log(this.fileBaseUrl+row.url)


    },



    submitChangeUser(){

      axios.get(this.fileBaseUrl+this.changeUserForm.url)
        .then((response) =>{
          // console.log(response);

          this.url = response.data;

          var params = new URLSearchParams();

          // console.log(this.url);

          params.append('icNum', this.changeUserForm.serialNumber);
          params.append('img', this.url);
          params.append('phoneNumber', this.changeUserForm.phone);
          params.append('sn', this.changeUserForm.sn);
          params.append('userId', this.changeUserForm.id);
           params.append('userName', this.changeUserForm.name);

            return axios({
                  url: this.baseUrl+'/v2/uploadData',
                  method: 'post',
                  data: params,
                }).then((response) =>{
              // console.log(response);
              const loadingDiv = util.showLoading("下发中")
              this.loading = true;

              if(response.data.code == 201) {
                this.$alert(response.data.msg, "失败", {dangerouslyUseHTMLString:true,type:'warning'})
              }else if(response.data.code == 200) {
                this.$alert(response.data.msg, "成功", {dangerouslyUseHTMLString:true,type:'success'})
                  .then(()=> {
                    this.editFormVisible=false;
                    this.getDataList(this.currentPage)
                  })
              }
              this.loading = false;
              loadingDiv.close();
            });
        });
        this.equipmentVisible = false;
    },




    // handleEditPrice(index, row) {
    //   // console.log(row)
    //   let item = {
    //     componentName:"testCarEnterprisePriceManage",
    //     icon:"",
    //     path:"/base/test_car_enterprise_price_manage/"+row.id,
    //     title: row.name+"-对外打包费维护",
    //   };

    //   this.$store.commit("openTab",{item:item, router: (path)=>{this.$router.replace(path)}})

    // },

    handlePreview(file) {
            // console.log(file);
          },
    // beforeRemove(file, fileList) {
    //     return this.$confirm(`确定移除 ${ file.name }？`);
    //   },
    handleRemove(file, fileList) {

      this.fileList = fileList;
      let data = [];
      // console.log(this.fileList.length)
      for(var i=0;i<this.fileList.length;i++){

        // console.log(fileList[i].response.data)
        data.push(fileList[i].response.data)
      }
      this.editForm.fileList = data;
      // this.editForm.fileList = fileList;

            // console.log(file, fileList);
      },
      handleAvatarSuccess(res, file, fileList){
        // console.log("12")
        // this.avatarUploadLoadingDiv.close();
        if (res.code == 1){
          this.fileList = fileList;
          let data = [];
          // console.log(this.fileList.length)
          for(var i=0;i<this.fileList.length;i++){

            // console.log(fileList[i].response.data)
            if(fileList[i].response!=null&&fileList[i].response!=''){
              data.push(fileList[i].response.data)
            }
          }
          this.editForm.fileList = data;
          // console.log(this.editForm.fileList)
          // this.fileList = fileList;
          // console.log("++++++++++++++++++");
          // console.log(this.editForm.fileList);
          // console.log(this.res.data);
          // console.log("++++++++++++++++++");
          return;
        }else{
          this.$message({
            message: res.msg,
            type: 'warning'
          });
        }
      },


    showAddDialogForm() {
      if(this.$refs.editForm){
        this.$refs.editForm.clearValidate();
      }

      for(let key in this.editForm){
        this.editForm[key] = '';
      }

      this.editForm.id = 0
      this.editFormVisible = true;
    },
    handleEdit(index, row) {

      if(this.$refs.editForm){
        this.$refs.editForm.clearValidate();
      }

      for(let key in this.editForm){
        this.editForm[key] = row[key];
      }

      this.editFormVisible = true;

    },
    submitForm() {
      this.$refs.editForm.validate(valid => {
        if(valid) {
          this.loading = true;
          let loadingText = "添加中...";
          if(this.editForm.id){
            loadingText = "修改中...";
          }
          const loadingDiv = util.showLoading(loadingText)
          let func = updateGoPersonnel
          if(this.editForm.id == 0){
            func = addGoPersonnel
          }
          func(this.editForm).then(res => {
            let title = "修改"
            if(this.editForm.id == 0){
              title = "添加"
            }
            if(res.code == 0) {
              this.$alert(res.msg, title+"失败", {dangerouslyUseHTMLString:true,type:'warning'})
            }else if(res.code == 1) {
              this.$alert(res.msg, title+"成功", {dangerouslyUseHTMLString:true,type:'success'})
                .then(()=> {
                  this.editFormVisible=false;
                  this.getDataList(this.currentPage)
                })
            }
            this.loading = false;
            loadingDiv.close();
          }).catch(res => {
            this.loading = false;
            loadingDiv.close();
          })
        }
      });
    },

    photograph() {
      this.$refs.editForm.validate(valid => {
        if(valid) {

          // 参数处理
          let param={
          };
          param['serialNumber'] = this.editForm.serialNumber;
          param['url'] = this.editForm.fileList[0];
          this.loading = true;
          let loadingText = "添加中...";
          if(this.editForm.id){
            loadingText = "修改中...";
          }
          const loadingDiv = util.showLoading(loadingText)
          let func = addGoPhotograph
          func(param).then(res => {
            let title = "修改"
            if(this.editForm.id == 0){
              title = "添加"
            }
            if(res.code == 0) {
              this.$alert(res.msg, title+"失败", {dangerouslyUseHTMLString:true,type:'warning'})
            }else if(res.code == 1) {
              this.$alert(res.msg, title+"成功", {dangerouslyUseHTMLString:true,type:'success'})
                .then(()=> {
                  this.photographVisible=false;
                  // this.getDataList(this.currentPage)
                })
            }
            this.loading = false;
            loadingDiv.close();
          }).catch(res => {
            this.loading = false;
            loadingDiv.close();
          })
        }
      });
      this.getDataList(this.currentPage)
    },

    handleDelete(index, row) {
      let loadingDiv;
      this.$confirm("是否确认删除："+row.name+"?","删除确认").then(res=>{
        if(res='confirm'){
          loadingDiv = util.showLoading("删除中...")
          return deleteGoPersonnel({id: row.id})
        }
      }).then(res => {
        loadingDiv.close();
        if(res.code == 0) {
          this.$alert(res.msg, "删除失败", {dangerouslyUseHTMLString:true,type:'warning'})
        }else if(res.code == 1) {
          this.$alert(res.msg, "删除成功", {dangerouslyUseHTMLString:true,type:'success'})
            .then(res=>{
              this.editFormVisible=false;
              this.getDataList(this.currentPage)
            })
        }
      }).catch(res=>{
        if (loadingDiv){
          loadingDiv.close();
        }
      })
    },
    fmtDate(d2, fmt) { // yyyy-MM-dd hh:mm:ss
      if (util.isEmpty(d2) || d2 <= 0){
        return "";
      }
      return  util.fmtDate(new Date(d2), fmt);
    },

    fmtTime(time,day){

      if(time!=null&time!=''){
        let times = time.split(",");
        var a = "";
        for(var i=0;i<times.length;i++){
          var t = new Date(times[i]);
          var t1 = new Date(times[i+1]);
          var s =  this.format(t,'HH:mm:ss');
          if(t.getDate()==day&&t1.getDate()!=day){
            a += "<div class='ellipsis'>"+s+"</div>";
            return a;
          }else if(t.getDate()==day){
            a += "<div class='ellipsis'>"+s+"</div>";

          }

        }
      }

    },

    format(time, format) {
                    var t = new Date(time);
                    var tf = function (i) { return (i < 10 ? '0' : '') + i };
                    return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
                        switch (a) {
                            case 'yyyy':
                                return tf(t.getFullYear());
                                break;
                            case 'MM':
                                return tf(t.getMonth() + 1);
                                break;
                            case 'mm':
                                return tf(t.getMinutes());
                                break;
                            case 'dd':
                                return tf(t.getDate());
                                break;
                            case 'HH':
                                return tf(t.getHours());
                                break;
                            case 'ss':
                                return tf(t.getSeconds());
                                break;
                        }
                    })
                },

    getDataList(pageNum){
      const loadingDiv = util.showLoading()
      this.monthList = [];
      for(var i=0; i<12;i++){
        this.monthList.push({id:i+1, month:i+1+'月'});
      }

      getGoClassesTimeList({
        pageSize: this.pageSize,
        pageNum: pageNum,
        month:this.searchForm.month
      }).then(res => {
        if(res.code == 0) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          });
        }else if(res.code == 1) {
          let data = res.data;
          this.currentPage = pageNum;
          this.total = data.total;
          this.tableData = data.dataList;
        }
        loadingDiv.close();
      }).catch(res => {
        loadingDiv.close();
      })

      // getDepartmentList().then(res => {
      //   if(res.code == 0) {
      //     this.$message({
      //       showClose: true,
      //       message: res.msg,
      //       type: 'error'
      //     });
      //   }else if(res.code == 1) {
      //     this.department = res.data;
      //     // let expandRowKeys = [];
      //     // for(let i in this.tableData){
      //     //   expandRowKeys.push(''+this.tableData[i].id);
      //     // }
      //     // this.expandRowKeys = expandRowKeys;
      //   }
      //   loadingDiv.close();
      // }).catch(res => {
      //   loadingDiv.close();
      // })


      // getDeviceManageList({
      //   pageSize: this.pageSize,
      //   pageNum: pageNum,
      //   // sn : datas,
      // }).then(res => {
      //   if(res.code == 0) {
      //     this.$message({
      //       showClose: true,
      //       message: res.msg,
      //       type: 'error'
      //     });
      //   }else if(res.code == 1) {
      //     let data = res.data;
      //     this.snName = data
      //   }

      // })

      // getGoPositionList({
      //   pageSize: this.pageSize,
      //   pageNum: pageNum,
      // }).then(res => {
      //   if(res.code == 0) {
      //     this.$message({
      //       showClose: true,
      //       message: res.msg,
      //       type: 'error'
      //     });
      //   }else if(res.code == 1) {
      //     let data = res.data;
      //     // this.currentPage = pageNum;
      //     // this.total = data.total;
      //     this.position = data.dataList;
      //   }
      //   loadingDiv.close();
      // }).catch(res => {
      //   loadingDiv.close();
      // })

      // axios.post('/face/api/v2/getDevices')
      //   .then((response) =>{
      //     // console.log(response.data.data);
      //     let sn = '';
      //     let data = [];
      //     for(var i=0; i < response.data.data.length;i++){
      //       sn = response.data.data.[i]
      //       data.push({
      //         "sn": sn
      //       });
      //     }
      //     this.snData = data;
      //     // console.log(this.tableData);

      //   });

    },
    clear(){
      this.searchForm.month = "";
    },
    search() {
      this.getDataList(this.currentPage)
    },
    handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.getDataList(1)
          },
    handleCurrentChange(pageNum) {
            this.getDataList(pageNum);
          },
  }
}
</script>

<style scoped lang="scss">

  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  // @import "~@/common/styles/element-variables.scss";
  .search-box {
    background-color: #FFFFFF;
    min-height: 36px;
    line-height: 36px;
    padding-top: 2px;
    padding-bottom: 6px;
    .el-form-item {
      margin-bottom: 0px !important;
    }
    .el-form--inline {
      display: inline-block;
    }
  }
  .pagination-box {
    text-align: left;
    margin-top: 10px;
  }
</style>
<style lang="scss">
  .el-dialog__header {

  }
  .el-dialog__body {
    padding-top: 10px;
    padding-bottom: 0px;
  }
  .el-dialog__footer {
    padding-top: 0px;
  }
</style>
